import styled from "styled-components";
// 合约列表包裹的容易

const containerPadding = ' padding: 0 30px;'
const contractItemLayout = ` &:nth-child(1){
  flex:4;
}
&:nth-child(2){
  flex:2;
}
&:nth-child(3){
  flex:2;
  text-align:right;
}`
export const ContractListContainer = styled.div`
  width:300px;
  height: 500px;
  background: #eee;
`;


export const ContracctListTitle = styled.div`
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  height: 40px;
  font-size: 14px;
  background: #22252D;
  ${containerPadding}
  color:#fff;
`
export const ContentHeader = styled.div`
  height: 33px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  ${containerPadding}
  border-bottom: 1px solid #22252d;
  color: #6A7286;
  background:#000;
`
// 单条数据样式一样
export const ContentItem = styled.p`
  margin-bottom:0;
  ${contractItemLayout}
  &.green{
    color:green;
  }
  color:#fff;
`


//合约详情容器
export const ContractInfoContainer = styled.div`
  margin-bottom:0;
  background:#000;
  height:500px;
  overflow:hidden;
  padding-bottom: 40px;
  overflow-y: scroll;
  &:hover{
    &::-webkit-scrollbar-thumb {    /*滚动条里面小方块*/
    background: rgba(0,0,0,0.2);
  }
}
 &::-webkit-scrollbar-track /*滚动条里面轨道*/
{  
box-shadow: inset 0 0 5px transparent;
border-radius: 0;
background: transparent;
}
 &::-webkit-scrollbar /*滚动条整体样式*/ { 
    width: 0px;
    height:8px; 
    background-color: transparent;
    border-radius: 5px;  
}
 &::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px transparent;
    background: transparent;
 }
 &::-webkit-scrollbar-corner{ 
     background-color: rgb(233, 7, 7);
}
  
`

// 合约看板详情

export const ContractInfo = styled.div`
    background:#000;
`

// 单个带标题的看板信息
export const ContractInfoItem = styled.div`
  margin-bottom:0;
  
  &.green{
  color:green;
  }
  color:#fff;
`

export const ContractInfoItemHeader = styled.h2`
  font-size: 12px;
  color: #E2B96F;
  height: 30px;
  line-height: 30px;
  ${containerPadding}
`

export const ContractInfoItemList =styled.div`
  display:flex;
  height:30px;
  ${containerPadding}
  align-items: center
  &:hover{
    background: #242933;
  }
  .item{
    font-size:12px;
  }
`


